<template>
    <div class="crux_box" v-loading="signalsRadio1.loading" element-loading-text="加载中...">
      <div style="min-height: 200px" v-if="signalsRadio1.total > 0">
        <div class="crux_cent" v-for="item in signalsRadio1.dataLiss" :key="item.cityid">
          <div class="crux_top">
            <span class="caption" v-if="item.infoid != '0'">{{
              informations(item.infoid)
            }}</span>
            <span class="caption" v-if="item.infoid == '0'">公告</span>
            <span v-html="item.title" class="neglect" @click="nameClick(item.nid, item.infoid)"></span>
            <span v-if="item.tags[0] != ''" class="glx" v-for="i in item.tags">
              {{ i }}</span>
            <el-popover placement="right" :width="200" trigger="hover">
              <template #reference>
                <span class="zizhi" v-if="item.certs.length > 0">资质</span>
              </template>
              <div style="padding: 10px 0 0 15px">
                <div style="font-size: 24px; margin-bottom: 15px">资质要求</div>
                <el-timeline>
                  <el-timeline-item v-for="(activity, index) in item.certs" :key="index">
                    {{ activity }}
                  </el-timeline-item>
                </el-timeline>
              </div>
            </el-popover>
            <span v-if="item.have_file == '1'" class="glxs"> 有附件</span>
  
            <!-- <el-popover v-if="activities2.length > 0" placement="right" :width="400" trigger="hover">
              <template #reference>
                <span class="xiaobiao">
                  <img style="margin-right: 6px; width: 14px; height: 14px" src="@/assets/img/lc.png" alt="" />
                </span>
              </template>
              <div style="padding: 10px;">
                <el-timeline>
                  <el-timeline-item v-for="(activity, index) in activities2" :key="index">
                    <div style="display: flex; justify-content: space-between;">
                      <div style="width: 230px;">
                        <div>{{ activity.content }}</div>
                        <div>{{ activity.timestamp }}</div>
                      </div>
                      <div style="margin-left: 10px;!important">{{ activity.title }}</div>
                    </div>
                  </el-timeline-item>
                </el-timeline>
              </div>
            </el-popover> -->
            <span class="logo1" v-if="item.bjTime > 0 && item.bjTime > dayspas">
              <img style="margin-right: 6px; width: 14px; height: 14px" src="@/assets/img/ls.png" alt="" />
              投标剩余 {{ toubiaoTime(item.bjTime) }} 天
            </span>
            <span class="logo2" v-if="item.wjTime > 0 && item.wjTime > dayspas">
              <img style="margin-right: 6px; width: 12px; height: 14px" src="@/assets/img/shu.png" alt="" />
              获取标书剩余 {{ toubiaoTime(item.wjTime) }} 天
            </span>
          </div>
          <div class="guanjian">
            <div class="guanjian_one" v-if="item.products?.length > 0" v-for="i in item.products.slice(0, 3)"
              :key="i.totalPrice" :class="{ red: signalsRadio1.title.title == i.names[0] }">
              {{ i.names[0] }}
            </div>
            <span v-if="item.products?.length > 3" class="more" @click="moreGd(item.products)">更多</span>
            <div></div>
          </div>
          <div class="crux_bth">
            <div class="crux_bth_one">
              <div class="crux_bth_zb">
                <span class="active">招标公司</span>
                <span v-if="item.xmdw != ''" v-html="item.xmdw"></span>
                <span v-if="item.xmdw == ''">{{ "-" }}</span>
              </div>
              <div class="crux_bth_zhb" v-if="item.infoid == '11'">
                <span class="active">中标公司</span>
                <span v-if="item.zbdw != null || item.zbdw != '' || item.zbdw != undefined
                " v-html="shujuleix(item.zbdw)">
                  </span>
                <!-- <span v-if="item.zbdw != null || item.zbdw != '' || item.zbdw != undefined"> {{ item.zbdw}}</span> -->
              </div>
            </div>
            <div class="crux_bth_two">
              <div class="money" v-if="item.jg != ''">
                <img style="width: 14px; margin-right: 5px" src="@/assets/img/money.png" alt="" />
                <span style="text-align: left">
                  {{ item.jg != "" ? money(item.jg) : "-" }}</span>
              </div>
              <div class="money" v-if="item.jg == ''">
                <img style="width: 14px; margin-right: 5px" src="@/assets/img/money.png" alt="" />
                <span style="text-align: left"> 见详情 </span>
              </div>
              <div class="address">
                <img style="width: 14px; margin-right: 5px" src="@/assets/img/dz.png" alt="" />
                <span style="text-align: left">{{ diqu(item.provinceid) }}</span>
              </div>
              <div class="timing">
                <img style="width: 14px; margin-right: 5px" src="@/assets/img/sj.png" alt="" />
                <span style="text-align: left">{{
                  timestamp(item.dl_posttime)
                }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="signalsRadio1.dataLiss.length == 0" style="background-color: white; margin: 15px 0;">
        <el-empty description="暂无数据" />
      </div>
      <Pagination />
      <!-- <Paginations v-if="signalsRadio1.routerPush == 'details' && bx_center!== 1" /> -->
      <!-- <Vips v-if="bx_center== 1" /> -->
    </div>
  
    <el-dialog v-model="dialogVisible" title="产品列表" width="30%" :before-close="handleClose">
      <div class="infordisplay">
        <span :class="{
          red: signalsRadio1.title.title == items.names[0],
          cate_labels: true,
        }" v-for="items in boxes">{{ items.names[0] }}</span>
      </div>
    </el-dialog>
  </template>
  
  <script setup>
  import Pagination from "@/components/pagination/index.vue";
  // import Paginations from "@/components/daochuPages/index.vue";
  // import Totalarticles from "../totalarticles/index.vue";
  import { userInfo } from '@/Api/api.js'
  import { onMounted, ref, reactive } from "vue";
  import { useRouter } from "vue-router";
  import { timestamp, diqu, money } from "@/utils/index";
  import { getCaricatureApi, search_read } from "@/Api/shoop/index.js";
  import { useRadio1Store } from "@/pain/search/search";
  // import { useCounterStore } from "@/pain/login/login";
  import { ElMessage } from "element-plus";
  // import Vips from "@/components/vipts/index.vue";
  const signalsRadio1 = useRadio1Store();
  // const useRouters = useCounterStore();
  let inforLiss = ref([]);
  const dialogVisible = ref(false);
  import CryptoJS from "crypto-js";
  const key = CryptoJS.enc.Utf8.parse("ysh425ptjhcpo781"); //十六位十六进制数作为密钥偏移量
  const iv = CryptoJS.enc.Utf8.parse("53c5a64c6be84e97"); //十六位十六进制数作为密钥偏移量
  const token = localStorage.getItem("token");
  //解密
  function decrypt(text) {
    var result = CryptoJS.AES.decrypt(text, key, {
      iv: iv,
      mode: CryptoJS.mode.CBC,
      padding: CryptoJS.pad.Pkcs7,
    });
    return result.toString(CryptoJS.enc.Utf8);
  }
  const bx_center = ref(0)
  const ids = ref()
  if (token) {
    userInfo().then(rex => {
      ids.value = rex.data.data.level_id
      search_read().then((res) => {
        if (res.data.data.bx_center.indexOf(ids.value) == '-1') {
          bx_center.value = 1
        } else {
          bx_center.value = 0
        }
      });
    })
  } else {
    ids.value = 0
  }
  
  
  
  const getInformation = () => {
    getCaricatureApi().then((res) => {
      let {
        data: { data },
      } = res;
      inforLiss.value = data;
      // console.log("中百欧", inforLiss);
    });
  };
  getInformation();
  const informations = (id) => {
    let infor = inforLiss.value?.filter((res) => res?.infoid == id);
    return infor?.[0]?.infoname;
  };
  // 获标 投标
  let dayspas = ref("");
  const toubiaoTime = (bjTime) => {
    const bjTimes = new Date(); // 当前时间
    dayspas.value = Math.floor(bjTimes.getTime() / 1000);
    if (bjTime > 0 && bjTime > dayspas.value) {
      let daysPassed = Math.ceil((bjTime - dayspas.value) / 86400);
      return daysPassed;
    }
  };
  
  const handleClose = (done) => {
    done();
  };
  let boxes = ref([]);
  const moreGd = (gd) => {
    dialogVisible.value = true;
    boxes.value = gd;
  };
  const Searchs = () => {
    if (signalsRadio1.routerPush == "search") {
      signalsRadio1.getsearchs();
    }
  
    if (signalsRadio1.routerPush == "details") {
      let daochu = JSON.parse(localStorage.getItem("daochu"));
      const ditu = JSON.parse(localStorage.getItem("ditu"));
      let list = {
        ...daochu,
        ...ditu,
      };
      signalsRadio1.T_getsearchs(list);
    }
  };
  // Searchs();
  onMounted(() => {
    console.log('dataLiss', signalsRadio1.dataLiss)
  });
  
  const router = useRouter();
  const nameClick = (nid, infoid) => {
    // if (!localStorage.getItem("token")) {
    //   return (useRouters.uselogin = true);
    // }
    if (signalsRadio1.routerPush == "search") {
      // const href = router.resolve({
      //   path: ,
      // });
      window.open(`/searchInfo?id=${nid}`, "_blank");
    }
  };
  
  const subscription = () => {
    signalsRadio1.subscriptions();
    if (signalsRadio1.msg != "") {
      ElMessage({
        message: signalsRadio1.msg,
        type: "success",
      });
    }
  };
  
  const shujuleix = (data) => {
    if (Array.isArray(data)) {
      return data[0];
    } else {
      return data;
    }
  };
  
  // 子站
  const biaoxunshuju = () => {
    if (
      router.currentRoute.value.query.tags != "" &&
      signalsRadio1.routerPush == "search"
    ) {
      signalsRadio1.getsearchs();
    }
  };
  console.log(router.currentRoute);
  // biaoxunshuju();
  </script>
  
  <style lang="scss" scoped>
  .totalar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    padding: 0 20px;
    background-color: #fff;
  
    .totalar_right {
      display: flex;
    }
  
    .daochu1 {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 90px;
      height: 30px;
      margin-left: 15px;
      font-size: 14px;
      border: 1px solid #6675FF;
      border-radius: 4px;
      color: #6675FF;
    }
  }
  
  .red {
    color: #ff4848;
  }
  
  .crux_box {
    background-color: #fff;
    min-height: 300px;
    // border-top: 1px solid #eeeeee;
  }
  
  .active {
    color: #a9b1be;
    margin-right: 10px;
  }
  
  .xiaobiao {
    display: inline-block;
    margin-left: 10px;
  }
  
  .crux {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    padding: 0 20px;
    border-bottom: 1px solid #eeeeee;
  
    .byword {
      font-size: 16px;
      font-weight: 500;
  
      .hinge {
        margin: 0 10px;
        padding: 2px 12px;
        font-size: 12px;
        font-family: Source Han Sans CN;
        background: #fde8bf;
        color: #f78c16;
        border-radius: 4px;
      }
    }
  
    .subscribe {
      width: 90px;
      height: 30px;
      background-color: #fe8d03;
      border-radius: 4px;
      font-size: 14px;
      text-align: center;
      line-height: 30px;
      color: #ffffff;
    }
  }
  
  .crux_cent {
    // height: 122px;
    padding: 20px 20px 20px 0;
    border-bottom: 1px solid #eeeeee;
    cursor: pointer;
  
    // &:hover {
    //   background-color: #eeeeee;
    // }
  
    .crux_top {
      display: flex;
      align-items: center;
  
      .caption {
        height: 20px;
        line-height: 20px;
        font-size: 12px;
        padding: 0 12px;
        margin-right: 10px;
        background-color: #f43107;
        border-radius: 4px;
        color: #ffffff;
      }
  
      .neglect {
        max-width: 480px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
  
      .glx {
        height: 20px;
        line-height: 20px;
        padding: 0 12px;
        margin-left: 10px;
        background-color: #f5f5f5;
        font-size: 12px;
        border-radius: 5px;
        color: #3b3e5d;
      }
  
      .glxs {
        height: 20px;
        line-height: 20px;
        padding: 0 12px;
        margin-left: 10px;
        background-color: #f43107;
        font-size: 12px;
        border-radius: 5px;
        color: #fff;
      }
  
      .zizhi {
        height: 20px;
        line-height: 20px;
        padding: 0 12px;
        margin-left: 10px;
        background-color: #ffe8bf;
        font-size: 12px;
        border-radius: 5px;
        color: #fe8d03;
      }
  
      .logo1 {
        display: flex;
        align-items: center;
        width: 125px;
        height: 20px;
        background: url("@/assets/img/biaoxun.png") no-repeat;
        background-size: 125px 20px;
        font-weight: 600;
        margin-left: 10px;
        padding-left: 15px;
        font-size: 12px;
        color: #eeeeee;
      }
  
      .logo2 {
        display: flex;
        align-items: center;
        width: 134px;
        height: 20px;
        background: url("@/assets/img/biaoxu2.png") no-repeat;
        background-size: 134px 20px;
        font-weight: 600;
        margin-left: 10px;
        padding-left: 15px;
        font-size: 12px;
        color: #eeeeee;
      }
    }
  
    .guanjian {
      display: flex;
      align-items: center;
      // justify-content: space-between;
      margin: 10px 0;
      // height: 20px;
      .guanjian_one {
        height: 20px;
        margin-right: 10px;
        line-height: 20px;
        font-size: 12px;
        // background-color: #e6e9ff;
        background: #fde8bf;
        // color: #f43107;
        padding: 0 10px;
        border-radius: 3px;
      }
    }
  
    .crux_bth {
      display: flex;
      justify-content: space-between;
      margin-top: 15px;
  
      .crux_bth_one {
        display: flex;
        font-size: 14px;
  
        .crux_bth_zb {
          width: 300px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
  
        .crux_bth_zhb {
          margin-left: 80px;
          width: 300px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
  
      .crux_bth_two {
        display: flex;
        font-size: 14px;
  
        .money {
          display: flex;
          align-items: center;
          width: 110px;
          margin-right: 50px;
          color: #fe8d03;
        }
  
        .address {
          display: flex;
          align-items: center;
          width: 74px;
          margin-right: 50px;
        }
  
        .timing {
          display: flex;
          align-items: center;
          width: 104px;
        }
      }
    }
  }
  
  .more {
    font-size: 12px;
    color: #f43107;
  }
  
  .infordisplay {
    height: 480px;
    overflow-x: hidden;
    overflow-y: scroll;
    display: flex;
    flex-wrap: wrap;
    // max-height: 400px;
    align-items: flex-start;
    overflow: auto;
    padding: 16px 24px;
  
    .cate_labels {
      margin-right: 10px;
      margin-bottom: 8px;
      padding: 2px 5px;
      border-radius: 5px;
      font-size: 14px;
      background: #fce2e0;
      color: #f43107;
    }
  
  
  }
  </style>
  